<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <style type="text/css">
        #div1{
            background-color: aliceblue;
            width: 500px;
            height: 400px;
            border: 1px black solid;
            position: absolute;
            top: 100px;
            left: 400px;
        }
        .spanStyle{
            color: red;
            font-size: 12px;

        }
    </style>
</head>
<body>
<!-- 	表单验证：
（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法。
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交 -->

<div id="div1">

    <form name="form" action="/myWeb/user/add" method="post" onsubmit="return check();">
        <br><br>
        用户名<input type="text" name="userName" id="name"/>
        <span id="span1" class="spanStyle"></span><br><br>

        密码<input type="password" name="password" id="password"/>
        <span id="span2" class="spanStyle"></span><br><br>

        确认密码<input type="password" id="passwordAg"/>
        <span id="span3" class="spanStyle"></span><br><br>

        性别:&nbsp&nbsp
        <input type="radio" name="sex" value="男"/>男
        <input type="radio" name="sex" value="女"/>女
        <br><br>

        邮箱<input type="text" name="email" id="mail"/>
        <span id="span4" class="spanStyle"></span><br><br>

        <input type="submit" value="注册" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" value="清空"/>

    </form>
</div>

<script type="text/javascript">

    var temp;
    var test1;
    var test2;
    var test3;
    var temp1;


    window.onload = function(){

        document.getElementById("name").onblur = function(){
            temp = document.getElementById("name").value;
            // console.log(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,14}$/.test(temp));
            if(temp == ''){
                console.log("ccc");
                test1 = false;
                document.getElementById("span1").innerText = "用户名不能为空";
                return;
            }
            else if(temp.length < 6 || temp.length > 14){
                test1 = false;
                document.getElementById("span1").innerText = "用户名必须在6-14位之间";
                return;
            }
            else if( ! ( /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,14}$/.test(temp) ) ){
                test1 = false;
                document.getElementById("span1").innerText = "用户名只能有数字和字母组成";
                return;
            } else {
                test1 = true;
            }
        }
        document.getElementById("name").onfocus = function(){
            document.getElementById("span1").innerText = "";
        }

        document.getElementById("passwordAg").onblur = function(){
            if(document.getElementById("password").value !=
                document.getElementById("passwordAg").value){
                test2 = false;
                document.getElementById("span3").innerText = "确认密码与密码不一致";
            }
            else test2 = true;
        }
        document.getElementById("passwordAg").onfocus = function(){
            document.getElementById("span3").innerText = "";
        }


        document.getElementById("mail").onblur = function(){
            temp1 = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(document.getElementById("mail").value);
            if(!temp1){
                test3 = false;
                document.getElementById("span4").innerText = "邮箱格式不合法";
            }
            else test3 = true;
        }
        document.getElementById("mail").onfocus = function(){
            document.getElementById("span4").innerText = "";
        }



        /*document.getElementById("submit").onclick = function(){
            if(test1 && test2 && test3){
                this.form.action="UserReview.asp?action=/myWeb/user/add"; //设置处bai理程序
                this.form.submit();//提交du表单
            }
            else {
                alert("输入信息有误，请重新输入！");
            }
        }*/
    }
    function check() {


        return test1 && test2 && test3;

    }
</script>
</body>
</html>
